<template>
	<view class="content">
		<view v-if="cert_status == 1" class="f16 cfd status t-c">
			认证中，请耐心等待!
		</view>
		<view class="form">
			<view class="d-f j-b list">
				<view class="">
					证件类型
				</view>
				<picker :disabled="cert_status == 1" mode="selector" :range="idcard" :value="card" @change="bindcardChange">
					<view class="d-f">
						{{idcard[card]}} 
						<image class="right" src="/static/y.png" alt="" />
					</view>
				</picker>
			</view>
			<view class="list mt-10">
				<view class="f20">上传附件</view>
				<view class="d-f j-b t-c mt-10">
					<view class="f14" @click="idimg('z')">
						<image class="card" :src="id_image_z" alt="" />
						<view>附件-正面</view>
					</view>
					<view class="f14" @click="idimg('f')">
						<image class="card" :src="id_image_f" alt="" />
						<view>附件-反面</view>
					</view>
				</view>
			</view>
			<view class="d-f j-b c1a f20 list mt-10">
				<label>真实姓名</label>
				<input :disabled="cert_status == 1" v-model="username" class="t-r" type="text" placeholder="请输入真实姓名" />
			</view>
			<view class="d-f j-b c1a f20 list mt-10">
				<label>证件号码</label>
				<input :disabled="cert_status == 1" v-model="id_number" class="t-r" type="text" placeholder="请输入证件号码" />
			</view>
			<view class="d-f j-b c1a f20 list mt-10">
				<label>银行卡号</label>
				<input :disabled="cert_status == 1" v-model="bank_no" class="t-r" type="text" placeholder="请输入银行卡号" />
			</view>
			<view class="d-f j-b c1a f20 list mt-10">
				<label>开户行</label>
				<input :disabled="cert_status == 1" v-model="bank_name" class="t-r" type="text" placeholder="请输入开户行" />
			</view>
		</view>
		<view v-if="cert_status == 0 || cert_status == 3" class="buts cff t-c f14" @click="submit">
			保存
		</view>
	</view>
</template>

<script>
	import unis from '@/utils/util.js'
	export default {
		data() {
			return {
				idcard:['身份证'],
				card:0,
				id_image_z:'/static/z.png',
				id_image_f:'/static/f.png',
				username:'',
				id_number:'',
				bank_no:'',
				bank_name:'',
				cert_status:0,
			}
		},
		onLoad() {
			var that = this
			unis.getData('/api/member/info', 'get', {
				
			}, function (res) {
				if(res.code == 200){
					that.id_image_z= res.data.id_image_z
					that.id_image_f= res.data.id_image_f
					that.username= res.data.username
					that.id_number= res.data.id_number
					that.bank_no= res.data.bank_no
					that.bank_name= res.data.bank_name
					that.cert_status = res.data.cert_status
				}
			});
		},
		methods: {
			submit(){
				var that = this
				if(that.id_image_z == '/static/z.png'){
					uni.showToast({title:'请上传身份证正面',icon: 'none',duration: 2000});
					return false
				}
				if(that.id_image_f == '/static/f.png'){
					uni.showToast({title:'请上传身份证反面',icon: 'none',duration: 2000});
					return false
				}
				if(!that.username){
					uni.showToast({title:'请输入真实姓名',icon: 'none',duration: 2000});
					return false
				}
				if(!that.id_number){
					uni.showToast({title:'请身份证号',icon: 'none',duration: 2000});
					return false
				}
				if(!that.bank_no){
					uni.showToast({title:'请输入银行卡号',icon: 'none',duration: 2000});
					return false
				}
				if(!that.bank_name){
					uni.showToast({title:'请输入开户行',icon: 'none',duration: 2000});
					return false
				}
				unis.getData('/api/member/cert', 'POST', {
					id_image_z:that.id_image_z,
					id_image_f:that.id_image_f,
					username:that.username,
					id_number:that.id_number,
					bank_no:that.bank_no,
					bank_name:that.bank_name,
					cert_type:that.card+1,
				}, function (res) {
					if(res.code == 200){
						uni.showToast({
						  title:'信息提交成功！',
						  icon: 'none',
						  duration: 2000
						});
						setTimeout(function() {
							uni.switchTab({
								url:'/pages/my/my'
							})
						}, 2000);
					}
				});
			},
			bindcardChange(e){
				console.log(e,uni.getStorageSync('token'))
			},
			idimg(e){
				var that = this
				if(that.cert_status == 1){
					return false
				}
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: async (res) => {
						uni.showLoading({
							title: '加载中'
						});
						uni.uploadFile({
							url: unis.getUrl + '/api/attachment/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
							  'Authorization': 'Bearer' + " " + uni.getStorageSync('token'),
							  'Content-Type': 'application/json',
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								if(e == 'z'){
									that.id_image_z = JSON.parse(uploadFileRes.data).data.url
								}else{
									that.id_image_f = JSON.parse(uploadFileRes.data).data.url
								}
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.form{
	background-color: #fff;
	padding:  16px;
	.right{
		margin-left: 10px;
		width: 8px;
		height: 14px;
	}
	.list{
		padding: 23px 16px;
		background-color: #F2F7F8;
		border-radius: 13px;
	}
	.card{
		width: 147px;
		height: 97px;
	}
}
.buts{
	width: 688rpx;
	margin:94px 16px 10px 16px;
	height: 45px;
	background: linear-gradient( 270deg, #36A2FC 0%, #2D73FF 100%);
	border-radius: 4px 4px 4px 4px;
	line-height: 45px;
	position: fixed;
	bottom: 30px;
}
.status{
	height: 38px;
	line-height: 38px;
	background-color: #FFE1E1;
}
</style>
